import { computed } from 'vue'
import XBCCS from 'xbccs'

export function useMessage(props : any) {
	// 发送者是否为客户
	const isSenderThemselve = computed(() => {
		return props?.message?.senderType == XBCCS.SENDER_ROLE.CUSTOMER
	})

	// 解析消息内容
	const messageContent = computed(() => {
		if (props?.message?.content instanceof Object) {
			return props?.message?.content
		}
		return JSON.parse(props?.message?.content || '{}')
	})

	// 头像
	const avatar = computed(() => {
		const name = props?.message?.senderType == XBCCS.SENDER_ROLE.CUSTOMER ? 'customer' : 'agent'
		return `${XBCCS.getHttpBaseUrl()}/${name}.svg`
	})

	// 消息是否发送中
	const isSending = computed(() => {
		return isSenderThemselve.value && props.message.status === XBCCS.MESSAGE_STATUS.SENDING
	})
	
	// 消息是否发送失败
	const isFailed = computed(() => {
		return isSenderThemselve.value && props.message.status === XBCCS.MESSAGE_STATUS.FAILED
	})

	return { isSending, isFailed, isSenderThemselve, messageContent, avatar }
}

export const messageProps = {
	message: { type: Object, default: {} },
	isReverse: { type: Boolean, default: true }, // 是否需要反转显示
	showReadStatus: { type: Boolean, default: true }, // 是否显示消息已读状态
}